<template>
   
    <div>
            <el-form :model="model"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
                 <el-row>
                     <el-col :span="8">
                            <el-form-item label="采购单编号" prop="Number">
                                 <el-input v-model="model.Number" placeholder="请选择供应商名称" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="外部系统id" prop="ExternalId">
                                 <el-input v-model="model.ExternalId" placeholder="请选择外部系统id" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="币种" prop="Currency">
                                <el-input v-model="model.Currency" placeholder="请输入币种" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                 <el-row>
                     
                      <el-col :span="8">
                            <el-form-item label="供应商名称" prop="VendorName">
                                 <el-input v-model="model.VendorName" placeholder="请选择供应商名称" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                       
                         <el-col :span="8">
                            <el-form-item label="入库仓" prop="WarehouseId">
                                 <el-input v-model="model.WarehouseId" placeholder="入库仓" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="采购状态" prop="Status">
                                
                                <el-tag type="info" v-if="model.Status == '0'">待审核</el-tag>
                                <el-tag type="success" v-else-if="model.Status == '1'">已审核</el-tag>
                                <el-tag type="danger" v-else-if="model.Status == '2'" >已入库</el-tag>
                            </el-form-item>
                        </el-col>
                </el-row>

                  <el-row>
                        <el-col :span="8">
                            <el-form-item label="交货日期" prop="DeliveryDate">
                                <el-input v-model="model.DeliveryDate" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="是否含税" prop="IsTax">
                                <el-radio-group v-model="model.IsTax" :readonly="true">
                                    <el-radio label="Y">是</el-radio>
                                    <el-radio label="N">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="付款日期" prop="PaymentTime">
                                 <el-input v-model="model.PaymentTime" placeholder="付款日期" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="付款账户" prop="PaymentAccount">
                                <el-input v-model="model.PaymentAccount" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="付款方式" prop="PaymentCategory">
                                <el-input v-model="model.PaymentCategory" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="货物状态" prop="State">
                                     <el-tag type="info" v-if="model.State == '0'">未到货</el-tag>
                                    <el-tag type="success" v-else-if="model.State == '1'">部分到货</el-tag>
                                    <el-tag type="danger" v-else-if="model.State == '2'" >全部到货</el-tag>
                            </el-form-item>
                        </el-col>
                </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="联系人" prop="VendorContact">
                                <el-input v-model="model.VendorContact"  placeholder="联系人" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                          <el-col :span="8">
                            <el-form-item label="联系人电话" prop="VendorContactTel">
                                <el-input v-model="model.VendorContactTel"  placeholder="联系人电话" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="备注" prop="Remark">
                                <el-input v-model="model.Remark" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
                <el-row>
                     <el-col :span="8">
                            <el-form-item label="不含税总价" prop="Total">
                                <el-input v-model="model.Total" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                         <el-col :span="8">
                            <el-form-item label="含税总价" prop="TaxTotal">
                                <el-input v-model="model.TaxTotal" :readonly="true"></el-input>
                            </el-form-item>
                        </el-col>
                </el-row>
        </el-form>
       <div style="border: 1px solid #dcdfe6; padding: 10px;">
            <h1 style="margin: 10px;">产品</h1>
          
            <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">

                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column prop="ItemCode" label="产品ID" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="ItemName" label="物料名称" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Model" label="型号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Spec" label="规格" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="UnitOfMeasure" label="单位" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="CurrCount" label="当前库存" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Amount" label="金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TaxPrice" label="含税单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="TaxAmount" label="含税金额" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Count" label="数量" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Price" label="商品单价" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="Tax" label="税率" :show-overflow-tooltip="true"> </el-table-column>
                <el-table-column prop="Remark" label="备注" :show-overflow-tooltip="true"></el-table-column>
        </el-table>
       </div>
    </div>
</template>

<script>
export default {
    props:{
        model:{
            require:true,
            type:Object,
        }
    },
    data(){
        return{
            tableData:[],
            isLoading:false,
        }
    },
    created(){
        this.GetOrderPoId();
    },
    methods:{
        GetOrderPoId(){
            console.log(this.model.WarehouseId)
            this.isLoading=true;
            this.$http.get('/api/OrderPo/GetOrderPoId',{
                params:{
                    OrderPoId:this.model.Id,
                    WarehouseId:this.model.WarehouseId
                }
            })
            .then(res=>{
                this.isLoading=false;
                this.tableData=res.Data;
            })
        },
    }
}
</script>

<style>

</style>